<template>
  <div class="musicPlayer">
    <img class="bgimg" :src="playList.picUrl" alt="" />
    <div class="playerContainer">
      <div class="containerLeft">
        <img
          class="cizhen"
          :class="{ cizhen_active: !isbtnShow }"
          src="../assets/cipan/cizhen.png"
          alt=""
        />
        <img class="cipan" src="../assets/cipan/cipan.png" alt="" />
        <img
          class="img_ar"
          :class="{ img_ar_active: !isbtnShow, img_ar_paused: isbtnShow }"
          :src="playList.picUrl"
          alt=""
        />
        <button class="btn">点我下载歌曲</button>
      </div>
      <div class="containerRight" v-if="lyric">
        <div class="lyricTitle">
          <p class="musictitle">{{ playList.name }}</p>
          <div class="musicdetail">
            <p>
              <span class="zj">专辑:</span>
              <span class="zjnr">专辑内容</span>
            </p>
            <p>
              <span class="gs">歌手:</span>
              <span class="gsmz">薛之谦</span>
            </p>
          </div>
        </div>
        <div class="musicLyric" ref="musicLyric">
          <p
            :class="{
              active:
                currentTime * 1000 >= item.time &&
                currentTime * 1000 <= item.pre,
            }"
            v-for="item in l"
            :key="item.time"
          >
            {{ item.lrc }}
          </p>
        </div>
      </div>
    </div>
    <footer-music ref="footerMusic" />
  </div>
</template>

<script>
import {
  getBanner,
  getMusicList,
  getMusicItemList,
  getItemList,
  getMusicLyric,
  getIcon,
} from "@/request/api/item"
import FooterMusic from "./FooterMusic.vue"
import { mapMutations, mapState } from "vuex"
export default {
  components: { FooterMusic },
  data() {
    return {
      songs: null, //存储某一首歌曲
      lyric: null, //存储歌词数据
    }
  },
  computed: {
    ...mapState(["playList", "isbtnShow", "currentTime", "duration"]),
    l() {
      let arr
      if (this.lyric.lrc.lyric) {
        arr = this.lyric.lrc.lyric.split(/[(\r\n)\r\n]+/).map((item, i) => {
          let min = item.slice(1, 3)
          let sec = item.slice(4, 6)
          let mill = item.slice(7, 10)
          let lrc = item.slice(11, item.length)
          let time =
            parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill)
          if (isNaN(Number(mill))) {
            mill = item.slice(7, 9)
            lrc = item.slice(10, item.length)
            time =
              parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill)
          }
          // console.log(min, sec, Number(mill), lrc)
          return { min, sec, mill, lrc, time }
        })
        arr.forEach((item, i) => {
          if (i == arr.length - 1 || isNaN(arr[i + 1].time)) {
            item.pre = 1000000
          } else {
            item.pre = arr[i + 1].time
          }
        })
      }
      console.log("歌词处理:", arr)
      return arr
    },
  },
  mounted() {
    this.getBanner()
    this.getMusicList()
    this.getMusicItemList()
    this.getItemList()
    this.getMusicLyric()
    this.getIcon()
  },
  methods: {
    ...mapMutations(["updateIsBtnShow"]),

    // 获取icon
    async getIcon() {
      let res = await getIcon()
      console.log("获取icon:", res)
    },
    // 异步请求获取歌单数据 使用前需要引用getBanner方法
    // 轮播图数据
    getBanner: async () => {
      let res = await getBanner()
      // console.log("轮播图数据:", res)
    },

    // 获取发现好歌单数据
    getMusicList: async () => {
      let res = await getMusicList()
      // console.log("获取发现好歌单数据:", res)
    },

    // 获取歌单详情页数据
    getMusicItemList: async () => {
      let res = await getMusicItemList()
      // console.log("获取歌单详情页数据:", res)
    },

    // 获取歌单所有歌曲
    async getItemList() {
      let res = await getItemList()
      this.songs = res.data
      console.log("获取歌单所有歌曲数据:", res)
    },

    // 获取歌词
    async getMusicLyric() {
      let res = await getMusicLyric()
      this.lyric = res.data
      console.log("获取歌词:", res)
    },
  },
  watch: {
    currentTime(newValue, oldValue) {
      let p = document.querySelector("p.active")
      // console.log([p]);
      if (p.offsetTop > 335) {
        this.$refs.musicLyric.scrollTop = p.offsetTop - 335
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.musicPlayer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .bgimg {
    z-index: -1;
    width: 100%;
    position: absolute;
    filter: blur(100px);
  }
  .playerContainer {
    width: 1100px;
    position: absolute;
    top: 99.998px;
    height: 600px;
    z-index: 1;
    display: flex;
    .containerLeft {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      .cizhen {
        width: 100px;
        height: 150px;
        position: absolute;
        left: 46%;
        transform-origin: 0 0;
        transform: rotate(-10deg);
        transition: all 2s;
      }
      .cizhen_active {
        width: 100px;
        height: 150px;
        position: absolute;
        left: 46%;
        transform-origin: 0 0;
        transform: rotate(0deg);
        transition: all 2s;
      }
      .cipan {
        width: 250px;
        height: 250px;
        position: absolute;
        bottom: 255px;
        z-index: -1;
      }
      .img_ar {
        width: 160px;
        height: 160px;
        position: absolute;
        border-radius: 50%;
        bottom: 300px;
        animation: rotate_ar 10s infinite linear;
      }
      .img_ar_active {
        animation-play-state: running;
      }
      .img_ar_paused {
        animation-play-state: paused;
      }
      @keyframes rotate_ar {
        0% {
          transform: rotateZ(0);
        }
        100% {
          transform: rotateZ(360deg);
        }
      }
      .btn {
        position: absolute;
        bottom: 180px;
        width: 150px;
        height: 50px;
        border: 1px solid rgb(59, 58, 58);
        border-radius: 25px;
        background-color: rgba(190, 178, 178, 0.2);
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      .btn:hover {
        background-color: rgba(206, 143, 175, 0.5);
      }
    }
    .containerRight {
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      .lyricTitle {
        width: 100%;
        height: 70px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .musictitle {
          font-size: 20px;
          color: #fff;
        }
        .musicdetail {
          color: #fff;
          width: 100%;
          display: flex;
          margin-bottom: 10px;
          p {
            width: 50%;
          }
          .zj,
          .gs {
            color: black;
          }
          .zjnr,
          .gsmz {
            margin-left: 10px;
          }
        }
      }
      .musicLyric {
        width: 100%;
        height: 530px;
        display: flex;
        flex-direction: column;
        align-items: center;
        overflow: scroll;
        overflow-x: hidden;
        p {
          margin-bottom: 25px;
          font-size: 14px;
          color: #989898;
          font-family: Arial, Helvetica, sans-serif;
        }
        .active {
          color: #fff;
          font-size: 18px;
        }
      }
    }
  }
}
/*滚动条样式*/
::-webkit-scrollbar {
  width: 4px;
  /*height: 4px;*/
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
</style>
